<template>
    <div style="background-color: #ffffff;">
        <!-- :before-change="beforeChange" -->
        <!-- <HeadNav :title="'出库统计'"></HeadNav> -->
        <!-- 周月年 -->
        <div class="content">
            <div class="topBox">
                <div class="sort-menu">
                    <div :class="[current === index ? 'sort_option_selected ' : '', 'sort_option']"
                        v-for="(item, index) in tabList" :key="index" :id="index"
                        @click="changeSort(index, $event, item.typeName)">
                        <div class="couponSpanText">{{ item.typeName }}</div>
                    </div>
                </div>
            </div>
            <div class="recordList" :style="dataLists.length > 0 ? bottomHeight : ''">
                <template v-if="dataLists.length > 0 && !loading">
                    <div class="recordItem" v-for="(item, index) in dataLists" :key="index"
                        @click="showDetail(item, index)">
                        <div class="recordItem_bg">
                            <div class="recordItem_top">
                                <div class="recordItemL">
                                    <div class="recordItemL-left"><img :src="item.dishImage" alt=""></div>
                                    <div class="recordItemL-right">
                                        <div class="recordItemL-right-top">
                                            <div class="recordItemL-right-name name-text">{{ item.dishName }}</div>
                                            <div class="recordItemL-right-name" style="float: right;">{{ item.sampleTime }}</div>
                                        </div>
                                        <div class="recordItemL-right-text" style="margin-top: 8px;">{{ item.description
                                            }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="actBtnArea" v-if="current===0">
                                <div class="actBtnBox">
                                    <div class="actBtn" @click.stop="edit(item)">编辑</div>
                                    <div class="actBtn" style="margin-left: 30px;" @click.stop="del(item)">删除</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current===1 && dataLists.length === 0 && !loading">
                    <div class="empty_content">当前暂无数据</div>
                </template>
            </div>
            <div :class="[dataLists.length>0 ? 'applyBtn' : 'applyCenterBtn']" v-if="current === 0" ref="bottomBtn" :style="dataLists.length > 0 ? { bottom: applyBtnBottom } : {}">
                <van-button type="primary" class="sub_btn" @click="toPreserveApply()">留存填报 </van-button>
            </div>
        </div>
        <foot ref="footer"></foot>
        <van-popup v-model="showTipsSingle" :closeable="true" round style="width: 80%;padding-bottom: 24px;">
            <div class="top_title">你确认删除当前留存菜品信息吗？</div>
            <div class="popup_sub_btn" @click="submitDel">
                确定
            </div>
        </van-popup>
    </div>
</template>

<script>
/* eslint-disable */
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
import foot from '../foot/foot.vue'
import { outToday, outStore } from '@/api/manager'
import {todayDishSampleListApi,sevenDishSampleListApi,deleteDishSampleApi} from '@/api/stall'
import { Toast } from 'vant';

export default {
    name: 'PreserveDishes',
    components: {
        HeadNav,
        foot
    },
    computed: {
        // ...mapState({
        //     token: (state) => state.applyrecords.token
        // })
    },
    watch: {
        active(newVal) {
            console.log('newVal', newVal)
            if (newVal === 0) {

            } else if (newVal === 0) {

            } else {

            }
        }
    },
    data() {
        return {
            active: 0,
            loading: true,
            tabList: [
                {
                    typeId: 0,
                    typeName: '今日留存'
                },
                {
                    typeId: 1,
                    typeName: '近七日留存'
                }
            ],
            recordList: [],
            show: true,
            current: 0,
            currentItem: -1,
            showTipsSingle: false,
            popupItem: undefined,
            dataLists:[
                {
                    id:1,
                    img:require('../../assets/images/caipinImg.png'),
                    name:'麻婆豆腐',
                    ingredient:'使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作',
                    reportTime:'15:20:30'
                },
                {
                    id:2,
                    img:require('../../assets/images/caipinImg.png'),
                    name:'麻婆豆腐',
                    ingredient:'使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作',
                    reportTime:'15:20:30'
                },
                {
                    id:3,
                    img:require('../../assets/images/caipinImg.png'),
                    name:'麻婆豆腐',
                    ingredient:'使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作',
                    reportTime:'15:20:30'
                },
                {
                    id:1,
                    img:require('../../assets/images/caipinImg.png'),
                    name:'麻婆豆腐',
                    ingredient:'使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作',
                    reportTime:'15:20:30'
                },
                {
                    id:2,
                    img:require('../../assets/images/caipinImg.png'),
                    name:'麻婆豆腐',
                    ingredient:'使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作',
                    reportTime:'15:20:30'
                },
                {
                    id:3,
                    img:require('../../assets/images/caipinImg.png'),
                    name:'麻婆豆腐',
                    ingredient:'使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作使用豆瓣酱、姜末、蒜末、酒、酱油、糖、,水淀粉等材料制作',
                    reportTime:'15:20:30'
                }
            ],
            bottomHeight:'',
            footerHeight:0,
            applyBtnBottom:'0px'
        }
    },

    // beforeRouteEnter(to, from, next) {
    //     next((vm) => {
    //     vm.localData = JSON.parse(to.query.item)
    //     })
    // },
    mounted() {
        this.loading=false
        this._todayDishSampleList()
        // this._outToday()
        this.$nextTick(() => {
            const menuHeight = this.$refs.bottomBtn.offsetHeight;
            console.log('底部菜单栏高度：', menuHeight)
            const footerMenu=this.$refs.footer.footerMenu
            console.log('底部菜单栏高度111aaa：', this.$refs.footer,footerMenu)
            // 如果需要将高度应用到其他样式或逻辑中
            this.footerHeight = footerMenu

            this.bottomHeight = `padding-bottom: ${Number(menuHeight) + Number(footerMenu)}px;`
            console.log(this.bottomHeight, 'bottomHeight')
            this.applyBtnBottom=`${Number(footerMenu)}px`
        })

    },
    created() {

    },

    methods: {
        // chuku(item) {
        //     console.log(item);
        //     this.popupItem = item
        //     this.showTipsSingle = true
        // },
       
        // _outToday() {
        //     this.loading = true
        //     const data = {
        //         status: this.current == 0 ? '入库' : '出库'
        //     }
        //     outToday(data).then(res => {
        //         if (res.code == 200) {
        //             this.recordList = res.data.records
        //             this.loading = false
        //             this.recordList.forEach(ele => {
        //                 this.$set(ele, 'isChecked', false)
        //             })
        //         } else {
        //             Toast(res.message)
        //         }

        //     })
        //     console.log(data);
        // },

        // 菜品留存明细
        showDetail(item, val) {
            const params = {}
            params.id=item.id
            this.$router.push({
                path:'/preserveDetails',
                query: { item: JSON.stringify(params) }
            })
        },
        changeSort(index, e, name) {
            this.current = index
            if(index===0){
                this._todayDishSampleList()
            }else{
                this._sevenDishSampleList()
            }
        },
        // 留存填报
        toPreserveApply(){
            const params ={}
            params.handle='add'
            this.$router.push({
                path:'/preserveApply',
                query: { item: JSON.stringify(params) } 
            })
        },

        // 编辑
        edit(item){
            const params ={}
            params.handle='edit'
            params.id=item.id
            // params.name=item.name
            // params.id=item.id
           this.$router.push({
                path:'/preserveApply',
                query: { item: JSON.stringify(params) } 
           })
        },
        // 删除
        del(item){
            this.popupItem = item
            this.showTipsSingle = true
        },

        // 删除
        submitDel() {
            console.log(this.popupItem, 'ii');
            this.deleteDishSample(this.popupItem.id)
            this.showTipsSingle = false
        },

        // 接口
        // 今日留存菜品信息
        _todayDishSampleList(){
            this.loading=true
            todayDishSampleListApi().then(res=>{
                if(res.code===200){
                    console.log(res,'res')
                    this.dataLists=res.data
                    this.loading=false
                }
            })
        },
        // 七日内留存菜品信息
        _sevenDishSampleList(){
            this.loading=true
            sevenDishSampleListApi().then(res=>{
                if(res.code==200){
                    console.log(res,'res---七日留存')
                    this.dataLists=res.data
                    this.loading=false
                }
            })
        },
        // 删除
        deleteDishSample(dishId){
            deleteDishSampleApi(dishId).then(res=>{
                if(res.code===200){
                    Toast('删除成功')
                    this._todayDishSampleList()
                }
            })
        }
    },
    beforeDestroy() {
        console.log('index')
        window.removeEventListener('scroll', this.onLoad, true)
    }
}
</script>

<style lang="less" scoped>
span,
p {
    padding: 0;
    margin: 0;
}

/deep/.van-tab {
    z-index: 200;
    height: 44px;
    //  background:rgb(216, 143, 143);
}

/deep/.van-tabs__wrap .van-tabs__wrap--scrollable {
    position: fixed;
}
/deep/.van-tabs__line {
    height: 0.6vw;
    background-color: rgb(255, 152, 82);
}

.content {
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
    height: 100%;
    // padding-bottom: 50px;
}

// 页面顶部的 未出库  已出库
.topBox {
    // margin-top: 44px; //headNav使用时  不注释
    width: 100%;
    background-color: #f9f9f9;
    // height: 48px;
    position: fixed;
    z-index: 20;
    padding-bottom: 15px;


    // 全部分类  menu
    .sort-menu {
        background-color: #ffffff;
        padding-left: 24px;
        padding-right: 24px;
        width: calc(100% - 48px);
        height: 48px;
        line-height: 48px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        vertical-align: middle;

        .sort_option {
            font-size: 14px;
            line-height: 18px;
            cursor: pointer;
            color: #999999;
        }

        .sort_option_selected {
            font-weight: bolder;
            line-height: 14px;
            font-size: 14px;
            color: #0081D3;
            // padding: 0px 35px 0px;
        }
    }

    // // 按钮公用样式
    //     .item_option {
    //       line-height: 14px;
    //       font-size: 14px;
    //       text-align: left;
    //       color: #666666;
    //     }

    //     .item_option_selected {
    //       // font-weight: 900;
    //       font-weight: bolder;
    //       text-align: left;
    //       color: #111111;
    //     }


}

.recordList {
    margin-top: 48px;
    background: #ffffff;
    padding-top: 10px;
    // height: 100%;
    // overflow: auto;
}


.recordItem {
    background-color: #f9f9f9;
    padding-bottom: 5px;
    margin-bottom: 5px;

    .recordItem_bg {
        background: #ffffff;
        padding:24px;
    }

    .recordItem_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .recordItemL {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .recordItemL-left {
        width: 73px;
        height: 73px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
            width: 73px;
            height: 73px;
        }

    }

    .recordItemL-right {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 13px;
        width:calc(100% - 86px);

        .recordItemL-right-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            .recordItemL-right-time{
                font-size: 13px;
                color: #000000;
                line-height: 13px;
                text-align: right;
            }
        }

        .recordItemL-right-name{
            font-size: 16px;
            color: #000000;
            line-height: 16px;
            text-align: left;
        }
        .name-text{
            max-width: 40%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }
        .recordItemL-right-text {
            font-size: 13px;
            color: #000000;
            text-align: left;
            margin-top: 15px;
            // 超过两行  文字用省略号
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal;
        }
    }

    .recordItemR {
        display: flex;
        align-items: center;

        .recordItemR-left {
            .recordItemR-left-num {
                color: #666666;
                font-size: 14px;
            }

            .recordItemR-left-price {
                color: #000000;
                font-size: 14px;
            }
        }


        .recordItemR-right {
            margin-left: 12px;
        }
    }
    .actBtnArea{
        display: flex;
        justify-content: flex-end;
        align-items: center;    
        padding-top:20px;   
        
        .actBtnBox{
            display: flex;
            align-items: center;
        }
        .actBtn{
            font-size: 13px;
            line-height: 13px;
            text-align: right;
            color: #047DCB; 
        }
    }
}

.recordItem:last-child {
    margin-bottom: 0px;
}

.details_box {
    padding: 0px 24px 12px 24px;
    height: 100%;
    overflow: auto;
}

.goods-box {
    background-color: #ffffff;
    padding: 12px 24px 12px 34px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;

    .goods-title {
        font-size: 12px;
        line-height: 12px;
        text-align: left;
        color: #000000;
    }

    .goods-num {
        display: flex;
        align-items: center;

        .selectnum {
            font-size: 12px;
            text-align: center;
            color: #000000;
            margin: 0px 3px;
        }
    }

    .plus {
        width: 15px;
        height: 15px;
        background: #047DCB;
        border: none;
    }

    .minus {
        width: 15px;
        height: 15px;
        border: 1px solid #047DCB;
    }

    /deep/.van-button--normal {
        color: #ffffff !important;
        padding: 5px;
    }
}



/*清浮动*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}



.tips {
    margin-top: 25px;
    font-size: 14px;
    text-align: right;
    color: #000000;
    line-height: 14px;
}

.recordBottom {
    padding: 12px 24px;

    .recordBottom_item {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .recordBottom_item_label {
            font-size: 12px;
            line-height: 12px;
            text-align: left;
            color: #999999;
        }

        .recordBottom_item_text {
            font-size: 12px;
            line-height: 12px;
            text-align: left;
            color: #000000;
        }

        .recordBottom_item_name {
            display: flex;
            align-items: center;
            font-size: 12px;
            line-height: 12px;
            // text-align: left;
            color: #000000;

            img {
                width: 54px;
                height: 30px;
            }

            .recipient {
                width: 44px;
                height: 20px;
            }
        }

    }
}

.btnArea {
    padding: 12px 24px;
    text-align: center;
}

// 无数据
.empty_content {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #000000;
    font-size: 16px;
    background: #ffffff;
}

// 弹窗
.top_title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #000;
    font-size: 15px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
}
// 弹窗确认按钮
.popup_sub_btn {
    width: 80%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 22px;
    color: #fff;
    background: #047DCB;
    margin: 8px auto;
    font-size: 15px;
}

// 留存填报按钮
.applyBtn{
    padding:12px 24px;
    position: fixed;
    // bottom: 50px;
    width: calc(100% - 48px);
    background-color: #ffffff;
}
// 按钮居中
.applyCenterBtn{
    padding:12px 24px;
    width: calc(100% - 48px);
    background-color: #ffffff;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.sub_btn {
  width: 100%;
//   height: 45px;
  border: none;
  color: #fff;
  font-size: 15px;
  background: #047DCB;
  border-radius:45px;
  text-align: center;
  margin-top: 0px;
}
</style>